<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue-</title>
    <style>
        .aa {
            background: #ff0000;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<!--self只触发标签自身的事件-->
<div id="app" class="aa" v-on:click.self="divClick">
    <div class="aa">
        <input type="button" value="按钮" v-on:click.stop="btnClick">
        <!--stop用来阻止事件冒泡-->
        <input type="button" value="按钮11" v-on:click.stop="btnClick1">
        <input type="button" value="按钮22" v-on:click.stop="btnClick2">
    </div>
    <hr>
    <!--
      .prevent : 用来阻止事件的默认行为 .once    : 用来只执行一次特定的事件
      .prevent.once连用,.prevent事件只阻止一次
      -->
    <a href="http://www.baizhibest.com/" v-on:click.prevent.once="preventClick">啪啪啪</a>
</div>


<!--在head或body标签内部，可以通过script标签引入外部的JS文件,这里引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            divClick() {
                alert("div事件触发了");
            },
            btnClick() {
                alert("btnClick事件触发了")
            },
            btnClick1() {
                alert("btnClick111事件触发了")
            },
            btnClick2() {
                alert("btnClick222事件触发了")
            },
            preventClick() {
                alert("啪啪啪事件触发");
            }


        }
    })
</script>
</body>
</html>